<!doctype html>
<html>
<head>
    <title>WebSSH</title>
    <link rel="stylesheet" href="css/xterm.css" />
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <style rel="stylesheet">

        .terminal {
          height: calc(100% - 10px);
          padding: 5px;
        }
    </style>
    <script>
        window.getContextPath=function() {
            var pathName = document.location.pathname;
            var index = pathName.substr(1).indexOf("/");
            var result = pathName.substr(0,index+1);
            return result;
        }
    </script>
</head>
<body>
<div id="terminal"></div>

<script src="//unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<!--<script src="//unpkg.com/browse/xterm@5.0.0/lib/xterm.js" charset="utf-8"></script>-->
<script src="js/xterm.js" charset="utf-8"></script>
<script src="js/webssh.js" charset="utf-8"></script>
<script>
    var connectData = window.localStorage.getItem("connectData");
    openTerminal(JSON.parse(connectData));
    /*
    * {
        operate:'connect',
        host: '',//IP
        port: '22',//端口号
        username: '',//用户名
        password: ''//密码
    }*/
    function openTerminal(options){
        var client = new WSSHClient();
        var window_width = $(window).width();
        var window_height = $(window).height();
<!--        var term = new Terminal({-->
<!--            cols: Math.floor(window_width/9),-->
<!--            rows: Math.floor(window_height/20),-->
<!--            useStyle:true,-->
<!--            cursorBlink: true, // 光标闪烁-->
<!--            cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'-->
<!--            scrollback: 10000, //回滚-->
<!--            tabStopWidth: 8, //制表宽度-->
<!--            screenKeys: true-->
<!--        });-->
        var term = new Terminal({
            useStyle:true,
            cursorBlink: true,
            scrollback: 10000,
            cols: Math.floor(window_width/9),
            rows: Math.floor(window_height/20),
            screenKeys: true
        });

        term.on('data', function (data) {
            //键盘输入时的回调函数
            client.sendClientData(data);
        });
        term.open(document.getElementById('terminal'));
        //在页面上显示连接中...
        term.write('Connecting...\r\n');
        //执行连接操作
        client.connect({
            onError: function (error) {
                //连接失败回调
                term.write('Error: ' + error + '\r\n');
            },
            onConnect: function () {
                //连接成功回调
                term.write('onConnect...\r\n');
                client.sendInitData(options);
            },
            onClose: function () {
                //连接关闭回调
                term.write("\rconnection closed");
                window.location.href=window.getContextPath()+"/login";
            },
            onData: function (data) {
                //收到数据时回调
                if (data.indexOf('\r\nlogout')>-1){
                    window.localStorage.clear();
                    window.location.href=window.getContextPath()+"/login";
                }
                term.write(data);
            }
        });
    }
</script>
</body>
</html>
